<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script
  src="https://code.jquery.com/jquery-3.6.1.js"
  integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="
  crossorigin="anonymous"></script>
    <title>Document</title>
    <script>
        $(function(){
            // 1,全选  全部选功能模块
            // 就是把全选按钮（all）的状态赋值给  3个小的按钮（jfd）
            // 事件可以使用change
            $(".all").change(function(){
                // console.log($(this).prop("checked"))
                $(".jfd").prop("checked",$(this).prop("checked"))
            })

            // 如小复选框选中的个数等于3  就应该把全选按钮选上，否则全选按钮不选
            $(".jfd").change(function(){
                if($(".jfd:checked").length==3){
                    $(".all").prop("checked",true)
                }else{
                    $(".all").prop("checked",false)
                }
            })
        })
    </script>
</head>
<body>
    <div class="da"><input type="checkbox" class="all">全选</div>
      <div class="fd"><input type="checkbox" class="jfd">赵亚</div>
      <div class="fd"><input type="checkbox" class="jfd">李宁宁</div>
      <div class="fd"><input type="checkbox" class="jfd">二哈</div>
</body>
</html>